<template>
	<view :style="{ '--color': vuex_config.themeColor1 }">
		<u-radio-group v-model="currentIndex">
			<view class="list">
				<view class="item" v-for="(item, index) in dataList" :key="index">
					<view class="top_post">
						<view class="top" @click="selectIndex(index)">
							<!-- <view class="post_type">{{ typeOption[item.type] }}</view> -->
							<view class="post_sign">{{ typeOption[item.type] }}</view>
							<view class="header">
								<image class="h-img" :src="item.headimgurl"></image>
								<text class="min_txt">{{ item.nickname }}</text>
							</view>
							<view class="title u-line-1">{{ item.name }}</view>
							<view class="bottom">
								<view class="b_img_box">
									<image class="b-img" :src="item.logo"></image>
								</view>
								<view class="b-right">
									<text class="min_txt">数量 x{{ type == 1 ? item.num : item.surplus_num }}</text>
									<view class="number-box">
										<text class="iconfont iconfont-e729" @click="optionVal('reduce', index)"></text>
										<input class="input" type="number" v-model="item.value"
											@blur="inputBlur($event, index)" />
										<text class="iconfont iconfont-e727" @click="optionVal('add', index)"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-radio :name="index"></u-radio>
				</view>
			</view>
		</u-radio-group>
		<sww-load-more :params="dataListParams"></sww-load-more>
		<view style="height: 100rpx; width: 100%;"></view>
		<view class="footer" v-if="type == 1">
			<text class="u-font-32" @click="seeRule">活动规则</text>
			<view class="btn-box">
				<view class="btn c-one" @click="goReceive">立即领取</view>
			</view>
		</view>
		<view class="footer" v-else-if="type == 2">
			<text class="u-font-32" @click="seeRule">活动规则</text>
			<view class="btn-box">
				<view class="btn c-one" @click="userEnvelope">立即使用</view>
				<view class="btn c-edb52d" @click="showSarePopup">转赠</view>
			</view>
		</view>
		<u-popup mode="bottom" v-model="showShareVisible">
			<view class="share_box">
				<view class="share_title">已选择红包：{{ shareParams.num }}张</view>
				<view class="share_list">
					<view class="share_item">
						<view class="title">祝福语</view>
						<view class="share_input"><input class="input_view" v-model="shareParams.title" type="text" />
						</view>
					</view>
					<view class="share_item">
						<view class="title">派发方式</view>
						<view class="share_input">
							<u-radio-group :active-color="vuex_config.themeColor1" v-model="shareParams.mode"
								@change="radioGroupChange">
								<u-radio v-for="(item, index) in numTypeList" :key="index" :name="item.type">
									{{ item.name }}</u-radio>
							</u-radio-group>
						</view>
					</view>
					<view class="share_item" v-if="shareParams.mode == 4">
						<view class="title">每人领取数</view>
						<view class="share_input">
							<u-number-box v-model="shareParams.relay_num" bg-color="#fff" :min="1"
								:max="shareParams.num"></u-number-box>
						</view>
					</view>
				</view>
				<view class="confirm_box"><button open-type="share" class="u-reset-button confirm_btn"
						@click="showShareVisible = false">转赠</button></view>
			</view>
		</u-popup>
		<u-popup mode="center" v-model="ruleVisible" border-radius="10" width="65%">
			<view class="rule_box">
				<view class="rule_title">活动规则</view>
				<view class="rule_txt">1. 点击“立即使用”，可立即使用红包，红包一经使用，无法撤销</view>
				<view class="rule_txt">2. 点击“转赠”并确认后会马上减去转赠红包设置的数量</view>
				<view class="rule_txt">3. 平均分享设置每个人平均领的数量不能大于选中的红包的转赠总数量</view>
			</view>
		</u-popup>

		<u-popup mode="center" v-model="couponVisible">
			<view class="coupon_main">
				<view class="audio_cont">
					<view class="di-l di-l-act">
						<view class="di-price">
							<text class="u-font-30 c-ff">￥</text>
							<text class="u-font-60 c-ff fw-bold">{{ $price(couponForm.price) }}</text>
						</view>
						<view class="di-desc u-font-24 c-ff l1 u-m-t-8">满{{ $price(couponForm.full_reduce) }}元可用</view>
					</view>
					<view class="di-r">
						<view class="di-t u-flex u-flex-col u-row-center">
							<view class="u-font-30 fw-bold u-line-1">{{ couponForm.name }}</view>
							<view class="remark u-font-24 u-line-1">{{ couponForm.remark }}</view>
						</view>
						<view class="di-b u-flex u-row-between">
							<view class="u-font-24 c-99 l1">
								到期：{{ (couponForm.coupon_receive_status == 1 ? couponForm.coupon_receive_effective : couponForm.end_effective) | format }}
							</view>
						</view>
					</view>
					<view class="di-state" v-if="couponForm.nearly == 2">已过期</view>
					<view v-else-if="couponForm.coupon_receive_status == 1">已领取</view>
				</view>
				<view class="btn_box">
					<view class="btn btn_l" @click="couponVisible = false">取消</view>
					<view class="btn" @click="useToCoupon">立即兑换</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/pagingMixin.js';
	import {
		useEnvelope
	} from '../useEnvelope.js';
	import {
		balance
	} from '@/mixins/balance.js';
	import {
		formatDate
	} from '@/utils/moment/index.js';
	export default {
		mixins: [pagingMixin, useEnvelope, balance],
		props: {
			type: {
				type: Number,
				default: 2
			} // 1:平台
		},
		filters: {
			format(data) {
				return formatDate(data, 'YYYY-MM-DD hh:mm');
			}
		},
		data() {
			return {
				currentIndex: null,
				showShareVisible: false,
				ruleVisible: false,
				shareParams: {
					img: '',
					receive_id: 1, /// 红包的领取id
					num: 1, // 要发出去的总数量
					title: '恭喜发财，大吉大利',
					relay_num: 1, // 均发的数量
					mode: 2
				},
				numTypeList: [{
						name: '群发',
						type: 2
					},
					{
						name: '转发',
						type: 3
					},
					{
						name: '平均',
						type: 4
					}
				],
				typeOption: {
					1: '产品',
					2: '优惠券',
					3: '积分',
					4: '余额'
				},
				couponForm: {},
				couponVisible: false
			};
		},
		mounted() {
			this.pageInit(true);
		},
		methods: {
			$onShow() {
				this.pageInit(true);
			},
			pageInit(showLoading) {
				this.currentIndex = null;
				let name = this.type == 2 ? 'GetRedEnvelopesReceiveList' : 'GetRedEnvelopesList';
				let params = {};
				if (this.type == 1) {
					params.users_type = this.vuex_user.level;
				}
				this._init_data(name, params, {
					showLoading: showLoading ? true : false,
					callBack: this.callBack
				});
			},
			$onReachBottom() {
				this._load_data({
					callBack: this.callBack
				});
			},
			callBack(list) {
				return list.map(item => {
					if (this.type == 1) {
						let num = item.initial_quantity || 1
						item.value = num < item.num ? num : item.num
					} else {
						item.value = 1;

					}
					return item;
				});
			},
			selectIndex(index) {
				this.currentIndex = index;
			},
			seeRule() {
				this.ruleVisible = true;
			},
			// 判断能否操作红包
			judge() {
				return new Promise((resolve, reject) => {
					if (!this.currentIndex && this.currentIndex !== 0) {
						this.$toast('请选择红包');
						reject();
						return;
					}
					let count = this.dataList[this.currentIndex].value;
					let sur_num = this.type == 1 ? this.dataList[this.currentIndex].num : this.dataList[this
						.currentIndex].surplus_num;
					if (count > sur_num) {
						this.$toast('红包数量不足');
						reject();
						return;
					}
					resolve(count);
				});
			},
			// 转赠
			showSarePopup() {
				this.judge().then(count => {
					this.shareParams.receive_id = this.dataList[this.currentIndex].pk_id;
					this.shareParams.num = count;
					this.shareParams.img = this.dataList[this.currentIndex].img || '';
					this.shareParams.relay_num = this.shareParams.relay_num;
					this.showShareVisible = true;
				});
			},
			// 立即使用
			userEnvelope() {
				this.judge().then(count => {
					let item = this.dataList[this.currentIndex];
					let type = item.type;
					let fk_pro_id = item.fk_pro_id;
					let receiveId = item.pk_id;
					if (type == 1) {
						// 产品兑换
						let envelopeId = item.fk_envelopes_id; // 红包id，这个字段没有返回
						let amount = item.amount;
						this.$emit('useProdEnvelope', {
							receiveId: receiveId,
							envelopeId: envelopeId,
							num: count,
							fk_pro_id: fk_pro_id,
							amount: amount
						});
					} else if (type == 2) {
						// 优惠券领取:打开弹窗
						if (count > 1) {
							this.$toast('优惠券红包只能使用一个');
							return;
						}
						this.$loading();
						this.getCouponInfo(fk_pro_id).then(obj => {
							this.couponForm = {
								...obj
							};
							this.couponVisible = true;
							this.$hide();
						});
					} else if (type == 3) {
						// 积分充值
						this.receiveIntegral(item.price * count, count, receiveId);
					} else if (type == 4) {
						// 余额充值
						uni.showModal({
							title: `兑换${count}个红包`,
							content: `确定充值￥${item.price * count}`,
							success: res => {
								if (res.confirm) {
									this.Addrecharge(item.price * count, 0, 0, `红包充值${receiveId}`,1)
										.then(order_no => {
											this.useSuccessEnvelop(type, order_no, receiveId,
												count, '余额充值成功');
										});
								}
							}
						});
					}
				});
			},
			useToCoupon() {
				this.receiveCoupon(this.couponForm, this.dataList[this.currentIndex].pk_id);
				this.couponVisible = false;
			},
			// 领取平台红包
			goReceive() {
				this.judge().then(count => {
					uni.showModal({
						title: '领取红包',
						content: `确定领取${count}个红包?`,
						success: res => {
							if (res.confirm) {
								this.$loading();
								this.$resPost('AddRedEnvelopesReceive', {
									envelopes_id: this.dataList[this.currentIndex].pk_id,
									mode: 1,
									num: count,
									fk_record_id: 0, // 使用记录表的id
									fk_receive_id: 0 // 如果是用户A转发的，写入用户A这个红包的领取id
								}).then(() => {
									this.$hide();
									this.$toast('领取成功');
									this.pageInit();
								});
							}
						}
					});
				});
			},
			// 选择转发类型
			radioGroupChange(name) {
				if (name == 3) {
					this.shareParams.relay_num = this.shareParams.num;
				} else {
					this.shareParams.relay_num = 1;
				}
			},
			// 加减红包数量
			optionVal(type, index) {
				let num = this.dataList[index].value;
				let str = this.type == 1 ? 'num' : 'surplus_num';
				if (type == 'add') {
					if (num < this.dataList[index][str]) {
						num += 1;
					}
				} else {
					if (num > 1) {
						num = num - 1;
					}
				}
				this.dataList[index].value = num;
			},
			inputBlur(e, index) {
				let str = this.type == 1 ? 'num' : 'surplus_num';
				let count = this.dataList[index][str];
				if (count < e.detail.value) {
					this.dataList[index].value = count;
				} else if (e.detail.value <= 0) {
					this.dataList[index].value = 1;
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.list {
		width: 100%;
		padding: 40rpx 20rpx 0;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.item {
			width: 48%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-bottom: 20rpx;

			.top_post {
				width: 100%;
				padding-bottom: 129.4%;
				height: 0;
				position: relative;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}

			.top {
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 100%;
				background-image: url(../static/close_en.png);
				background-size: cover;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;

				.post_sign {
					// background: rgba(0,0,0,0.6);
					font-size: 20rpx;
					padding: 6rpx 10rpx;
					position: absolute;
					left: 50%;
					transform: translate(-50%);
					top: 0;
					color: #fff;
				}

				.post_type {
					position: absolute;
					left: 6rpx;
					top: 6rpx;
					color: #fff;
					font-size: 24rpx;
				}

				.min_txt {
					color: #ffd68b;
					margin-top: 6rpx;
					font-size: 22rpx;
				}

				.header {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding-top: 14%;

					.h-img {
						background-color: #f5f5f5;
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						border: 2px solid #fff;
						box-sizing: content-box;
					}
				}

				.title {
					width: 100%;
					padding: 20rpx 10rpx 0;
					flex: 1;
					overflow: hidden;
					font-size: 22rpx;
					color: #fff;
					text-align: center;
				}

				.bottom {
					width: 100%;
					display: flex;
					align-items: center;
					padding: 0 20rpx 20rpx;

					.b_img_box {
						background-color: #f5f5f5;
						width: 130rpx;
						height: 130rpx;
						margin-right: 12rpx;
					}

					.b-right {
						flex: 1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						align-items: center;

						.number-box {
							border-top: 4rpx solid #ccc;
							border-bottom: 4rpx solid #ccc;
							height: 46rpx;
							line-height: 46rpx;
							border-radius: 6rpx;
							background-color: #ccc;
							font-size: 26rpx;
							margin-top: 10rpx;
							display: flex;
							align-items: center;
							position: relative;

							.iconfont {
								padding: 0 10rpx;
							}

							.input {
								line-height: 46rpx;
								min-height: 46rpx;
								flex: 1;
								overflow: hidden;
								text-align: center;
								background-color: #fff;
						}
							}
					}
				}
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding-left: 20rpx;
		color: var(--color);

		.btn-box {
			display: flex;
			align-items: center;

			.btn {
				width: 200rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 32rpx;

				&.c-one {
					background-color: var(--color);
				}

				&.c-edb52d {
					background-color: #edb52d;
				}
			}
		}
	}

	.share_box {
		padding: 0 30rpx;

		.share_title {
			padding: 20rpx 0;
		}

		.share_item {
			margin-bottom: 20rpx;
			background-color: #f2f2f2;
			display: flex;
			align-items: center;
			height: 80rpx;

			.title {
				width: 200rpx;
				padding-left: 20rpx;
			}

			.share_input {
				flex: 1;
				overflow: hidden;
			}
		}

		.confirm_box {
			display: flex;
			justify-content: center;
			padding: 10rpx 0 30rpx;

			.confirm_btn {
				padding: 0 80rpx;
				line-height: 70rpx;
				background-color: var(--color);
				color: #fff;
				border-radius: 10rpx;
				font-size: 32rpx;
			}
		}
	}

	.rule_box {
		padding: 20rpx 16rpx;

		.rule_title {
			font-size: 36rpx;
			text-align: center;
		}

		.rule_txt {
			font-size: 28rpx;
			margin-top: 26rpx;
		}
	}

	.coupon_main {
		.btn_box {
			display: flex;
			background-color: #fff;
			border-top: 1rpx solid #ddd;

			.btn {
				line-height: 80rpx;
				flex: 1;
				overflow: hidden;
				text-align: center;

				&.btn_l {
					border-right: 1rpx solid #ddd;
				}
			}
		}

		.audio_cont {
			display: flex;
			padding: 10rpx;

			.di-state {
				width: 150rpx;
				height: 35rpx;
				font-size: 20rpx;
				line-height: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 16rpx;
				right: -40rpx;
				background-color: #999999;
				color: #ffffff;
				transform: rotate(45deg);
			}

			.di-l {
				width: 240rpx;
				height: 170rpx;
				background-color: #999999;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.di-l-act {
				background: linear-gradient(150deg, var(--color), $sww-theme-color-opacity);
			}

			.di-r {
				flex: 1;
				width: 100%;
				padding: 0 24rpx;
				display: flex;
				flex-direction: column;
				overflow: hidden;

				.di-t {
					flex: 1;
					width: 100%;
					height: 100%;
				}

				.remark {
					color: #999;
				}

				.di-b {
					width: 100%;
					height: 78rpx;
					border-top: 1rpx dotted #dddddd;
				}
			}
		}
	}
</style>
